<template>
    <div class="water-card">
        <!-- 动态标题位置 -->
        <div :class="['title', titlePosition]">{{ title }}</div>

        <div class="card-container">
            <dv-charts :option="option" style="width:100px;height:100px;"/>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';


const props = defineProps({
    option: { type: Object, default: () => ({}) },     // 配置参数
    title: { type: String, default: '' },     // 标题文本
    titlePosition: {                         // 标题位置
        type: String,
        default: 'top',
        validator: v => ['top', 'bottom', 'left', 'right'].includes(v)
    },
});


</script>

<style scoped>
.water-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题位置控制 */
.title.top {
    order: -1;
    margin-bottom: 5px;
}

.title.bottom {
    order: 1;
    margin-top: 5px;
}

.title.left {
    align-self: flex-start;
    margin-right: 10px;
}

.title.right {
    align-self: flex-end;
    margin-left: 10px;
}

.card-container {
    display: flex;
    gap: 2px;
}

.echarts-wrap {
    width: 100%;
    height: 75%;
}
</style>